<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>聊天室</title>
  <link rel="stylesheet" href="/public/css/bootstrap.css">
  <script src="/public/js/ajax.js"></script>
  <script src="/public/js/template-web.js"></script>
  <style>
    .a_ {
      float: left;
    }

    .a_a {
      float: right;
    }

    ul {
      overflow: auto;
      height: 300px;
    }

    li {
      list-style: none;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1 align="center">聊天室</h1>
    </div>
  </div>
  <div class="comments container">
    <ul class="list-group list-group-item">
      {{each comments}}
      <li>{{ $value.name}}说： {{ $value.message}}<span class="pull-right">{{ $value.dateTime}}</span></li>
      {{/each}}
    </ul>
  </div>
  <div class="comments container">
    <form action="/ping_lun" method="get" autocomplete="off">
      <div class="form-group">
        <label for="input_name">名字</label>
        <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name"
          placeholder="请写入姓名">
      </div>
      <div class="form-group">
        <label for="textarea_message">内容</label>
        <input type="text" class="form-control" required minlength="1" id="input_name" name="message"
          placeholder="请输入内容">
      </div>
      <button type="submit" class="btn btn-default a_">发言</button>
    </form>
    <button type="submit" class="btn btn-default a_a">刷新</button>
  </div>
  <script>
    var a1 = document.querySelector('.a_a')
    var ul = document.querySelector('ul')

    a1.onclick = function () {
      window.location.reload()
    }
  </script>
</body>

</html>